<template>
  <div class="op-group">
    <div class="op-title">空间统计</div>
    <div class="option-item" :class="{ active: geometricCenterDetailVisible }">
      <!-- 几何中心 -->
      <div class="detail-panel">
        <!-- 快速计算 -->
        <div class="sub-item">
          <span class="check-item">几何中心</span>
          <div v-if="!geometricCenterDetailVisible" class="check-item-btn">
            <a-button class="op-btn" size="small" @click="showDetail"
              >编辑</a-button
            >
            <a-button
              :disabled="checkParams"
              class="op-btn-sub"
              type="primary"
              size="small"
              @click="doOption"
              >确定</a-button
            >
          </div>
        </div>
        <!-- 参数配置 -->
        <div v-if="geometricCenterDetailVisible" class="analysis-detail">
          <div class="prompt-information">
            <span class="prompt-text"
              >注：为全部或选择要素生成各要素几何中心</span
            >
            <a-popover
              :overlay-class-name="'gis-analysis-tool-help'"
              placement="topRight"
            >
              <template slot="content">
                <div class="help-popover-title">几何中心</div>
                <div class="help-popover-text">
                  为当前图层的每个要素或选取图层中的若干要素，计算各要素区域的几何中心。几何中心会保存为新图层。
                </div>
              </template>
              <div class="prompt-help">
                <a-icon-font type="iconbangzhu" />
              </div>
            </a-popover>
          </div>
          <div class="setting-item">
            <div class="setting-label">当前图层:</div>
            <div class="setting-content">
              {{ selectLayer ? selectLayer.name : '-- 请选择图层 --' }}
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-label">选择要素:</div>
            <div class="setting-content">
              <a-select v-model="drawScope" style="width: 100%;" size="small">
                <a-select-option value="global">全局</a-select-option>
                <a-select-option value="local" disabled>局部</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="setting-item">
            <div class="setting-label required-item">生成图层:</div>
            <div class="setting-content">
              <a-input
                v-model="generateLayerName"
                size="small"
                placeholder="请输入"
              ></a-input>
            </div>
          </div>
          <div class="button-row">
            <a-button class="op-btn-sub" size="small" @click="cancel"
              >取消</a-button
            >
            <a-button
              :disabled="checkParams"
              :loading="loading"
              class="op-btn-sub"
              type="primary"
              size="small"
              @click="doOption"
              >确定</a-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 空间统计: 几何中心， 边界框绘制
 * @author Hou Jinhui
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'

@Component({
  components: {},
})
export default class SpatialStatistics extends Vue {
  public geometricCenterDetailVisible: boolean = false // 参数详情
  public get selectLayer() {
    return GisStore.selectLayer
  }
  public drawScope: string = 'global'
  public generateLayerName: string = '几何中心' // 生成图层名称
  public loading: boolean = false

  @Watch('selectLayer')
  public onSelectLayer(layer: any) {
    if (layer) {
      this.generateLayerName = `${layer.name}-几何中心`
    } else {
      this.generateLayerName = '几何中心'
    }
  }

  public mounted() {
    this.generateLayerName = this.selectLayer
      ? `${this.selectLayer.name}-几何中心`
      : '几何中心'
  }

  public get projectId() {
    return GisStore.projectId
  }
  public get tabId() {
    return GisStore.currentTabId
  }

  public showDetail() {
    this.geometricCenterDetailVisible = true
  }

  //  点击取消，关闭推荐面板
  public cancel() {
    this.geometricCenterDetailVisible = false
  }

  public get checkParams() {
    return !this.selectLayer?.id || !this.generateLayerName.trim()
  }

  /**
   * 编辑确认
   */
  public async doOption() {
    const parameters: any = {
      projectId: this.projectId,
      tabId: this.tabId,
      layerId: this.selectLayer?.id,
      setLayerName: this.generateLayerName,
    }
    GisStore.setMapLoading(true)
    this.loading = true
    const response = await GisStore.saveCentroidLayer(parameters)
    GisStore.setMapLoading(false)
    this.loading = false
    if (response.data.code === 100) {
      const layers: any = response.data.result
      const sortByOrder: any[] = layers.sort(
        (layer1: any, layer2: any) => layer1.order - layer2.order
      )
      this.$message.success(`操作成功，已生成新图层${sortByOrder[0].name}`)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('analysis-tool.less');
</style>

<style lang="less">
// 用户引导 step popover
.gis-analysis-tool-help {
  user-select: none;
  width: 248px !important;

  .help-popover-title {
    color: #5d637e;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.3px;
  }

  .help-popover-text {
    color: #5d637e;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.12px;
  }
}
</style>
